<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="ys.css" />
</head>

<body>
    <div class="container">
        <!-- 注册 -->
        <div class="container-form container-signup" id="signup-container">
            <!-- 注册 -->
            <form action="#" class="form" id="form1">
                <h2 class="form-title">注册账号</h2>
                <input type="text" placeholder="User" class="input" />
                <input type="email" placeholder="Email" class="input" />
                <input type="password" placeholder="password" class="input" />
                <button type="button" class="btn">点击注册</button>
            </form>
        </div>
        <div class="container-form container-signin hidden" id="signin-container">
            <form action="#" class="form" id="form2">
                <h2 class="form-title">欢迎登陆(0 ◡ 0)っ♡⊂(ᗜ ˰ ᗜ)​</h2>
                <input type="email" placeholder="Email" class="input" />
                <input type="password" placeholder="password" class="input" />
                <a href="#" class="link">忘记密码？</a>
                <button type="button" class="btn">登录</button>
            </form>
        </div>
        <div class="container-overlay">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <button class="btn" id="signIn">
                        已有账号，直接登录ξ( ✿＞◡❛)​
                    </button>
                </div>


                <div class="overlay-panel overlay-right">
                    <button class="btn" id="signUp">
                        没有账号,点击注册Ciallo～(∠・ω< )⌒☆ </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        const signInBtn = document.querySelector("#signIn");
        const signUpBtn = document.querySelector("#signUp");
        const container = document.querySelector(".container");
        signInBtn.addEventListener("click", () => {
            container.classList.remove("panel-active");
        });
        signUpBtn.addEventListener("click", () => {
            container.classList.add("panel-active");
        })
    </script>


</body>

</html>